<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>最强大脑拼王者</title>
    <script type="text/javascript">
        // 根据屏幕的宽度 来设置 html的 font-size
        // 计算 font-size
        var fontSize = window.screen.availWidth / 20;
        document.querySelector('html').style.fontSize = fontSize + 'px';
        console.log(document.documentElement.style.fontSize);
        window.onresize = function () {
            // 计算 font-size
            var fontSize = window.screen.availWidth / 20;
            document.querySelector('html').style.fontSize = fontSize + 'px';
        }
        // 跟媒体查询比 在移动端使用 没有优劣之分
        // 面试问道 媒体查询 还有 js 都回答 即可
    </script>

    <link rel="stylesheet" type="text/css" href="css/answer.css" />
    <!--<link rel="stylesheet" href="lib/animate.css">-->
</head>
<body>
<div class="answer">
    <div class="blue_left di animated bounceInLeft">
        <div class="head_l"></div>
        <div class="my_name">郑地豆</div>
    </div>
    <div class="red_right di animated bounceInRight">
        <div class="head_r"></div>
        <div class="other_name">叶良辰</div>
    </div>
    <div class="time">
        <div class="num" id="time_num">10</div>
    </div>
    <div class="time_h"></div>
    <!--倒计时的那个进度条-->
    <div id="circle"></div>
    <div class="question animated bounceInDown">第一题</div>
    <div class="defen_bg_2 animated">
        <div class="defen_bg animated bounceInDown">
            <div class="last">最后一题</div>
            <div class="double">双倍得分</div>
        </div>
    </div>
    <div class="type_bg animated bounceInDown">
        <div class="type">外语</div>
    </div>
    <div class="timu animated fadeIn">TNT 指的是什么?</div>
    <div class="g_l bgg">
        <!--<div>COM BO &times; 4</div>-->
    </div>
    <!--<div class="g_r bgg">-->
        <!--<div class="num">COM BO &times; 4</div>-->
    <!--</div>-->

    <div class="score_l sl animated bounceInLeft">
        <div class="step"></div>
        <div class="score_l_num">0</div>
    </div>
    <div class="score_r sl animated bounceInRight">
        <div class="step"></div>
        <div class="score_r_num">0</div>
    </div>

    <div class="option animated zoomIn">
        <div class="option1 op">
            <div class="word">达摩</div>
            <div class="biaozhi">O</div>
        </div>
        <div class="option2 op">
            <div class="word">苏烈</div>
            <div class="error">	&times;</div>
        </div>
        <div class="option3 op">
            <div class="word">张飞</div>
        </div>
        <div class="option4 op">
            <div class="word">芈月</div>
        </div>
    </div>
</div>
</body>
</html>

<!-- 导入 zepto 使用zepto 来实现 dom元素操纵 -->
<script type="text/javascript" src="lib/zepto.js"></script>
<script type="text/javascript" src="lib/event.js"></script>
<script type="text/javascript" src="lib/fx.js"></script>
<script type="text/javascript" src="lib/touch.js"></script>
<!-- fadein toggle等 动画方法的模块 -->
<script type="text/javascript" src="lib/fx_methods.js"></script>
<script>
    // <!--实现圆环计时器的js-->
    // console.log(fontSize*(170/54));
    var i = 9;
    var timer = setInterval(function() {
        if (i == -1) {
            clearInterval(timer);
        } else {
            document.getElementById("time_num").innerHTML = i;
            --i;
        }
    }, 1000)
    function Loading(setting) {
        this.settings ={
            animationTime:10,//动画执行时间
            divId:"circle",//div盒子的id
            divWidth:fontSize*(180/54) + "px",//盒子的宽度
            divHeight:fontSize*(180/54) + "px", // 盒子的高度
            divClassName: "active", //添加class名字后就会执行加载动画
            leftDivName:"left", //第一个盒子的class名字
            rightDivName:"right", //内部第二个盒子的class名字
            infinite:false, // 是否循环
            loadingWidth:fontSize*(30/54) + "px", //圆圈宽度
            loadingColor:"white" //圆圈的颜色

        };

        this.timeOut = null; //延迟器

        if(setting){
            for(var i in setting){
                this.settings[i] = setting[i];
            }
        }


        this.prefix = function () {
            var div = document.createElement('div');
            var cssText = '-webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;';
            div.style.cssText = cssText;
            var style = div.style;
            if (style.webkitTransition) {
                return '-webkit-';
            }
            if (style.MozTransition) {
                return '-moz-';
            }
            if (style.oTransition) {
                return '-o-';
            }
            if (style.msTransition) {
                return '-ms-';
            }
            return '';
        };

        this.runOne = function (callback) {
            var that = this;
            //调用运行一次
            this.div.classList.add(this.settings.divClassName);
            this.timeOut = setTimeout(function () {
                that.div.classList.remove(that.settings.divClassName);
                callback.call(that.div,that.div);
            },+that.settings.animationTime*1000)
        };

        this.runForever = function () {
            this.div.classList.add(this.settings.divClassName);
        };

        var div = this.div = document.getElementById(this.settings.divId);
        div.style.cssText = "border-radius:50%; width:"+this.settings.divWidth+"; height:"+this.settings.divHeight+"; clip:rect(0,"+div.offsetWidth+"px,"+div.offsetHeight+"px,"+div.offsetWidth/2+"px);;";
        var left = document.createElement("div");
        left.className = this.settings.leftDivName;
        var right = document.createElement("div");
        right.className = this.settings.rightDivName;
        var style = document.createElement("style");
        div.appendChild(left);
        div.appendChild(right);

        style.innerText = "" +
            "@"+this.prefix()+"keyframes circle-animation {" +
            "   0%{clip:rect(0,"+div.offsetWidth+"px,"+div.offsetHeight+"px,"+div.offsetWidth/2+"px);}" +
            "   100%{clip:auto;}" +
            "}\n" +
            "@"+this.prefix()+"keyframes left-animation {" +
            "   0%{transform: rotate(-45deg);}" +
            "   50%{transform: rotate(135deg);}" +
            "   100%{transform: rotate(315deg);}" +
            "}\n" +
            "@"+this.prefix()+"keyframes right-animation {" +
            "   0%{transform: rotate(-45deg);}" +
            "   50%{transform: rotate(135deg);}" +
            "   100%{transform: rotate(135deg);}" +
            "}\n" +
            "#"+this.settings.divId+"."+this.settings.divClassName+"{" +
            "   "+this.prefix()+"animation: circle-animation "+this.settings.animationTime+"s linear "+(this.settings.infinite ? "infinite":"")+";" +
            "}\n" +
            "#"+this.settings.divId+" ."+this.settings.leftDivName+",#"+this.settings.divId+" ."+this.settings.rightDivName+"{" +
            "   border-left:"+this.settings.loadingWidth+" solid "+this.settings.loadingColor+";" +
            "   border-top:"+this.settings.loadingWidth+" solid "+this.settings.loadingColor+";" +
            "   border-right:"+this.settings.loadingWidth+" solid rgba(0,0,0,0);" +
            "   border-bottom:"+this.settings.loadingWidth+" solid rgba(0,0,0,0);" +
            "   transform: rotate(-45deg);" +
            "   position:absolute;" +
            "   left:0;" +
            "   top:0;" +
            "   width:100%;" +
            "   height:100%;" +
            "   border-radius:50%;" +
            "   box-sizing:border-box;" +
            "}\n" +
            "#"+this.settings.divId+"."+this.settings.divClassName+" ."+this.settings.leftDivName+"{" +
            "   "+this.prefix()+"animation: left-animation "+this.settings.animationTime+"s linear "+(this.settings.infinite ? "infinite":"")+
            "}\n" +
            "#"+this.settings.divId+"."+this.settings.divClassName+" ."+this.settings.rightDivName+"{" +
            "   "+this.prefix()+"animation: right-animation "+this.settings.animationTime+"s linear "+(this.settings.infinite ? "infinite":"")+
            "}\n" +
            "";

        document.head.appendChild(style);
    }

    var obj = new Loading({divId:"circle"}); //实例化构造函数
    obj.runOne(function () { //只运行一次，外加传入一个匿名函数
        console.log("动画执行完成");
        obj.runForever(); // 调用一直执行的函数
    });

    // 开启定时器，执行动画
    $(function(){
        setTimeout(function(){
            $('.answer').addClass('animate');
        },1000);

        //第几题与类型消失
        setTimeout(function(){
            $('.question').removeClass('bounceInDown');
            $('.question').addClass('bounceOut');
            $('.type_bg').removeClass('bounceInDown');
            $('.type_bg').addClass('bounceOut');
        },2500);
        //题目与选项消失
        setTimeout(function(){
            $('.timu').removeClass('fadeIn');
            $('.timu').addClass('fadeOut');
            $('.option').removeClass('zoomIn');
            $('.option').addClass('zoomOut');
        },5000);
        //最后一题的提示消失
        $('.defen_bg').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            $('.defen_bg_2').addClass('fadeOut');
        });
    })
</script>
<!--http://127.0.0.1:3000/socket.io/socket.io.js-->
<script type="text/javascript" src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
<script>
    // var socket = io();
    var socket=io.connect('ws://127.0.0.1:3000');//与服务器进行连接
    socket.emit('tiku',{
        "context":"我要玩",
        "name":"郑地豆" + Math.floor(Math.random()*10)
    });
    socket.on('tiku',function(msg){
        console.log(msg);
    })
    // $(".option .op").on('click',function(e){
    //     console.log(e);
    //     var that = this;
    //     $(this).css("background-color","red");
    //     socket.emit('dati',e);
    //     socket.on('dati',function(msg){
    //         $(this).css("background-color","red");
    //     });
    // })
    $(".option1").click(function(e){
        $(".option1").css("background-color","red");
        socket.emit('dati',e);

    })
    socket.on('dati',function(msg){
        $(".option1").css("background-color","red");
        // div.style.backgroundColor = "red"

    });
</script>

